<template>
  <div class='big-screen-wrapper'>
    <div class='title-wrapper'>
      <div class='title'>审计信息系统数据统计平台</div>
    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <caseWrapper>
          <div class='left-wrapper-1'>
            <div class='flex-item'>
              <div class='flex-title'>
                当前用户登录次数
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.a }}
              </div>
            </div>
            <div class='flex-item'>
              <div class='flex-title'>
                当前用户登录时长(h)
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.b }}
              </div>
            </div>
            <div class='flex-item'>
              <div class='flex-title'>
                用户在线率
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.c }}
              </div>
            </div>
            <div class='flex-item'>
              <div class='flex-title'>
                当前单位及下级审计机构数
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.d }}
              </div>
            </div>
            <div class='flex-item'>
              <div class='flex-title'>
                审计人员数
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.e }}
              </div>
            </div>
            <div class='flex-item'>
              <div class='flex-title'>
                今日新增审计人员
              </div>
              <div class='flex-count'>
                {{ leftWrapper1.f }}
              </div>
            </div>
          </div>
        </caseWrapper>
        <caseWrapper title='单位登录情况'>
          <div class='left-wrapper-2'>
            <div style="width: 100%;padding: 5px 0;background: rgba(13,120,191,0.36)">
              <div style="width: 60%;text-align: center;display: inline-block">单位名称</div>
              <div style="width: 10%;text-align: center;display: inline-block">登录次数</div>
              <div style="width: 30%;text-align: center;display: inline-block">登录时长(h)</div>
            </div>
            <vue-seamless-scroll :data="leftWrapper2Data" style="height: 210px;overflow: hidden;width: 100%"
                                 :class-option="classOption">
              <div v-for="(item,index) in leftWrapper2Data" style="padding: 5px 0" :style="{background:index%2==0? '#041d37':'#05294a'}">
                <div style="width: 60%;text-align: center;display: inline-block" v-text="item.name"></div>
                <div style="width: 10%;text-align: center;display: inline-block" v-text="item.number"></div>
                <div style="width: 30%;text-align: center;display: inline-block" v-text="item.hour"></div>
              </div>
            </vue-seamless-scroll>
            <!--            <a-table :columns='leftWrapper2Cols' :data-source='leftWrapper2Data' :pagination='false'-->
            <!--                     :scroll='{ y: 200 }'>-->
            <!--            </a-table>-->
          </div>

        </caseWrapper>
        <caseWrapper title='审计计划情况'>
          <div class='left-wrapper-3'>
            <div class='left'>
              <div class='flex-item'>
                <div class='flex-title'>
                  制定审计计划
                </div>
                <div class='flex-count'>
                  {{ leftWrapper3Data.a }}
                </div>
              </div>
              <div class='flex-item'>
                <div class='flex-title'>
                  已通过审计计划
                </div>
                <div class='flex-count'>
                  {{ leftWrapper3Data.b }}
                </div>
              </div>
              <div class='flex-item'>
                <div class='flex-title'>
                  未通过审计计划
                </div>
                <div class='flex-count'>
                  {{ leftWrapper3Data.c }}
                </div>
              </div>
            </div>
            <div class='right'>
              <chartPie
                v-if='leftWrapper3'
                :sourceChartOption='leftWrapper3'
              >
              </chartPie>
            </div>
          </div>
        </caseWrapper>
      </div>
      <div class='middle-wrapper'>
        <caseWrapper title='年度审计项目统计'>
          <chartStackBar
            v-if='middleWrapper1'
            :sourceChartOption='middleWrapper1'
          ></chartStackBar>
        </caseWrapper>
        <caseWrapper title='审计分类统计'>
          <chartPie
            v-if='middleWrapper2'
            :sourceChartOption='middleWrapper2'
          >
          </chartPie>
        </caseWrapper>
        <caseWrapper title='单位实施审计排行'>
          <div class='middle-wrapper-3'>
            <div class='progress-item' v-for='item in middleWrapper3'>
              <div>
                <span style='margin-right: 28px'>{{ item.text }}</span>
                <span>{{ item.value }}</span>
              </div>
              <a-progress :percent='item.progress'/>
            </div>
          </div>
        </caseWrapper>
      </div>
      <div class='right-wrapper'>
        <caseWrapper title='审计项目情况'>
          <div class='right-wrapper-1'>
            <div class='left'>
              <div class='flex-item'>
                <div class='flex-title'>
                  未开始
                </div>
                <div class='flex-count'>
                  {{ rightWrapper1Data.a }}
                </div>
              </div>
              <div class='flex-item'>
                <div class='flex-title'>
                  作业中
                </div>
                <div class='flex-count'>
                  {{ rightWrapper1Data.b }}
                </div>
              </div>
              <div class='flex-item'>
                <div class='flex-title'>
                  已归档
                </div>
                <div class='flex-count'>
                  {{ rightWrapper1Data.c }}
                </div>
              </div>
              <div class='flex-item'>
                <div class='flex-title'>
                  超期
                </div>
                <div class='flex-count'>
                  {{ rightWrapper1Data.d }}
                </div>
              </div>
            </div>
            <div class='right'>
              <chartPie
                v-if='rightWrapper1'
                :sourceChartOption='rightWrapper1'
              >
              </chartPie>
            </div>
          </div>
        </caseWrapper>
        <caseWrapper title='各阶段审计项目占比'>
          <chartPie
            v-if='rightWrapper2'
            :sourceChartOption='rightWrapper2'
          >
          </chartPie>
        </caseWrapper>
        <caseWrapper title='审计问题整改完成情况'>
          <chartPie
            v-if='rightWrapper3'
            :sourceChartOption='rightWrapper3'
          >
          </chartPie>
        </caseWrapper>
      </div>
    </div>
  </div>
</template>

<script>
  import {chartPie, chartLine, chartStackLine, chartStackBar} from '@/components/BaseCharts/index'
  import caseWrapper from './case'
  import {axios} from '@/utils/request'
  import * as lodash from 'lodash'
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: 'index',
    components: {chartPie, chartLine, chartStackLine, caseWrapper, chartStackBar, vueSeamlessScroll},
    computed: {
      classOption() {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    data() {
      return {
        selectProject: '1',
        leftWrapper1: {
          a: '21',
          b: '242.3',
          c: '75.00%',
          d: '3284',
          e: '961',
          f: '0'
        },
        leftWrapper2Cols: [
          {
            title: '单位名称',
            dataIndex: 'name',
            key: 'name'
          },
          {
            title: '登录次数',
            dataIndex: 'number',
            key: 'number'
          },
          {
            title: '登陆时长(h)',
            dataIndex: 'hour',
            key: 'hour'
          }
        ],
        leftWrapper2Data: [],
        leftWrapper3: {
          chartType: 'chartPie',
          refID: `leftWrapper3`,
          text: '通过率',
          subText: '0%',
          series: []
        },
        leftWrapper3Data: {
          a: '',
          b: '',
          c: ''
        },
        middleWrapper1: {
          chartType: 'chartBar',
          refID: `middleWrapper1`,
          text: '',
          subText: '',
          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          series: [
            {
              name: '审计项目计划数',
              data: [],
              barWidth: 10,
              itemStyle: {normal: {barBorderRadius: [15, 15, 0, 0]}},
              notStack: true
            },
            {
              name: '实际实施数',
              data: [],
              barWidth: 10,
              itemStyle: {normal: {barBorderRadius: [15, 15, 0, 0]}},
              notStack: true
            }
          ]
        },

        middleWrapper2: {
          chartType: 'chartPie',
          refID: `middleWrapper2`,
          text: '审计分类',
          subText: '',
          series: []
        },
        middleWrapper3: [],
        rightWrapper1: {
          chartType: 'chartPie',
          refID: `rightWrapper1`,
          text: '总审计项目数',
          subText: '0',
          series: []
        },
        rightWrapper1Data: {
          a: '',
          b: '',
          c: '',
          d: ''
        },
        rightWrapper2: {
          chartType: 'chartPie',
          refID: `rightWrapper2`,
          text: '总项目数',
          subText: '',
          series: []
        },
        rightWrapper3: {
          chartType: 'chartPie',
          refID: `rightWrapper3`,
          text: '总问题数',
          subText: '0',
          series: []
        }
      }
    },
    created() {
      this.fetchLeft1()
      this.fetchLeft2()
      this.fetchLeft3()
      this.fetchMiddle1()
      this.fetchMiddle2()
      this.fetchMiddle3()
      this.fetchRight1()
      this.fetchRight2()
      this.fetchRight3()
    },
    methods: {
      deepCopy(data) {
        return JSON.parse(JSON.stringify(data))
      },
      getRandom(arr) {
        let dp = [...arr]
        return dp.sort(() => Math.random() - 0.5)
      },
      handleProjectChange() {
        const sourceChartOption1 = this.deepCopy(this.sourceChartOption1)
        sourceChartOption1.series = this.getRandom(sourceChartOption1.series)
        this.sourceChartOption1 = null

        setTimeout(() => {
          this.sourceChartOption1 = sourceChartOption1
        }, 100)

        const sourceChartOption2 = this.deepCopy(this.sourceChartOption2)
        sourceChartOption2.series = this.getRandom(sourceChartOption2.series)
        this.sourceChartOption2 = null

        setTimeout(() => {
          this.sourceChartOption2 = sourceChartOption2
        }, 100)

        const sourceChartOption3 = this.deepCopy(this.sourceChartOption3)
        sourceChartOption3.series.forEach(item => {
          item.data = this.getRandom(item.data)
        })

        this.sourceChartOption3 = null
        setTimeout(() => {
          this.sourceChartOption3 = sourceChartOption3
        }, 100)

        const sourceChartOption4 = this.deepCopy(this.sourceChartOption4)
        sourceChartOption4.series.forEach(item => {
          item.data = this.getRandom(item.data)
        })

        this.sourceChartOption4 = null
        setTimeout(() => {
          this.sourceChartOption4 = sourceChartOption4
        }, 100)
      },

      async fetchLeft1() {
        const ret = await axios.get('/bigScreen/show/queryUserInfo')
        let {result: {number, hour, onrate, office_count, auditor_count, auditor_today}} = ret
        this.leftWrapper1 = {
          a: number,
          b: hour,
          c: onrate,
          d: office_count,
          e: auditor_count,
          f: auditor_today
        }
      },
      async fetchLeft2() {
        const ret = await axios.get('/bigScreen/show/queryOrgLogin')
        let {result} = ret
        this.leftWrapper2Data = result
      },
      async fetchLeft3() {
        const ret = await axios.get('/bigScreen/show/queryAuditPlan')
        let {result: {all, pass, off}} = ret
        this.leftWrapper3Data = {
          a: all,
          b: pass,
          c: off
        }
        const dataShadow = lodash.cloneDeep(this.leftWrapper3)
        if (all === 0) {
          dataShadow.subText = '0%'
        } else {
          dataShadow.subText = ((pass / all) * 100).toFixed(2) + '%'
        }
        dataShadow.series = [
          {data: [pass], name: '通过'},
          {data: [off], name: '未通过'}
        ]
        this.leftWrapper3 = null
        setTimeout(() => {
          this.leftWrapper3 = dataShadow
        }, 100)
      },
      async fetchMiddle1() {
        const ret = await axios.get('/bigScreen/show/queryYearAuditPro')
        let {result: {data, data1}} = ret
        const dataShadow = lodash.cloneDeep(this.middleWrapper1)
        dataShadow.series[0].data = data
        dataShadow.series[1].data = data1
        this.middleWrapper1 = null
        setTimeout(() => {
          this.middleWrapper1 = dataShadow
        }, 100)
      },
      async fetchMiddle2() {
        const ret = await axios.get('/bigScreen/show/queryAuditClassify')
        let {result: {data, color, all}} = ret
        const dataShadow = lodash.cloneDeep(this.middleWrapper2)
        if (Array.isArray(data)) {
          dataShadow.series = []
          data.forEach((item, index) => {
            let key = Object.keys(item)[0]
            let value = Object.values(item)[0]
            value = value || 0
            console.log(key, value)

            dataShadow.series.push({
              data: [value],
              name: key,
              itemStyle: {color: color[index]}
            })
          })
        }
        this.middleWrapper2 = null
        setTimeout(() => {
          const seriesColorFn = (params) => {
            let {dataIndex} = params
            return color[dataIndex]
          }
          dataShadow.seriesColorFn = seriesColorFn
          this.middleWrapper2 = dataShadow

          console.log('this.middleWrapper2', this.middleWrapper2)
        }, 100)
      },
      async fetchMiddle3() {
        const ret = await axios.get('/bigScreen/show/queryOrgCarryAuditSort')
        let {result} = ret
        let arr = []
        for (let i = 0; i < result.counts.length; i++) {
          arr.push({text: result.names[i], progress: parseInt(result.rates[i]), value: result.counts[i]})
        }
        this.middleWrapper3 = arr
      },
      async fetchRight1() {
        const ret = await axios.get('/bigScreen/show/queryAuditPro')
        let {result: {data1, all}} = ret
        this.rightWrapper1Data = {
          a: data1[0],
          b: data1[1],
          c: data1[2],
          d: data1[3]
        }
        const dataShadow = lodash.cloneDeep(this.rightWrapper1)
        dataShadow.subText = all
        dataShadow.series = [
          {data: [data1[0]], name: '未开始'},
          {data: [data1[1]], name: '作业中'},
          {data: [data1[2]], name: '已归档'},
          {data: [data1[3]], name: '超期'},
        ]
        this.rightWrapper1 = null
        setTimeout(() => {
          this.rightWrapper1 = dataShadow
        }, 100)
      },
      async fetchRight2() {
        const ret = await axios.get('/bigScreen/show/queryAuditPro')
        let {result: {data, all}} = ret
        const dataShadow = lodash.cloneDeep(this.rightWrapper2)
        dataShadow.subText = all
        dataShadow.series = [
          {data: [data], name: '准备阶段'},
          {data: [data], name: '实施阶段'},
          {data: [data], name: '报告阶段'},
          {data: [data], name: '归档阶段'},
          {data: [data], name: '整改阶段'},
        ]
        this.rightWrapper2 = null
        setTimeout(() => {
          this.rightWrapper2 = dataShadow
        }, 100)
      },
      async fetchRight3() {
        const ret = await axios.get('/bigScreen/show/queryAuditRectify')
        let {result: {all, not, has}} = ret
        const dataShadow = lodash.cloneDeep(this.rightWrapper3)
        dataShadow.subText = all
        dataShadow.series = [
          {data: [has], name: '已整改'},
          {data: [not], name: '未整改'}
        ]
        this.rightWrapper3 = null
        setTimeout(() => {
          this.rightWrapper3 = dataShadow
        }, 100)
      }

    }
  }
</script>

<style scoped lang='less'>

  ::v-deep {
    .ant-progress-bg{
      background-color: #4281bb;
    }
    .ant-progress-inner{
      background-color: #05294a;
    }
    .is-black {
      box-shadow: rgba(255, 51, 32, 0.97) 0 0 18px inset;
    }

    .ant-table-pagination.ant-pagination {
      margin: 15px 15px 0 0;
    }

    .ant-pagination-item {
      background-color: transparent;
      border: 1px solid transparent;
    }

    .ant-pagination-item-link {
      background: transparent;
      border-color: transparent;
    }

    .ant-pagination-item-active {
      color: #13D4D5;
      background: transparent;
      border: 1px solid #13D4D5;
    }

    .ant-pagination li a {
      color: white !important;
    }

    .ant-pagination {
      color: white;
    }

    .ant-table-body {
      background-color: transparent !important;
    }

    .ant-table-row td {
      padding-top: 11px;
      padding-bottom: 11px;
    }

    .ant-table-header {
      background-color: transparent !important;
      margin-bottom: 0 !important;
      overflow-x: hidden !important;
    }

    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: rgba(255, 255, 255, 0.7);
      color: black !important;
    }
  }

  .ant-table-wrapper {
    width: 100%;
    background: transparent;

    ::v-deep {
      .ant-table-row {
        color: white;
      }

      .ant-table-placeholder {
        background: transparent;
        border: none;

        * {
          color: white;
        }
      }

      .ant-spin-nested-loading {
        width: 100%;

        th, td {
          border-bottom: none;
        }

        .ant-table-thead {
          background-color: rgba(8, 245, 217, 0.3);
          height: 30px;
          line-height: 0.3;
          color: white;

          * {
            background: transparent;
            color: white;
          }
        }
      }
    }

  }

  .big-screen-wrapper {
    width: 100%;
    height: calc(100% - 0px);
    background: url(~@/assets/bigscreen/bg.png) no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;

    .title-wrapper {
      background: url(~@/assets/bigscreen/title.png) no-repeat;
      background-size: contain;
      position: relative;
      width: 100%;
      height: 110px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 1vw;
      flex-shrink: 0;

      & > * {
        text-align: center;
        font-size: 1vw;
        background-image: linear-gradient(180deg, #35F5FF, #357CC0);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
      }

      & > .title {
        font-size: 1.3vw;
      }

      & > .category {
        margin-top: 0.1vw;

        /deep/ * {
          background: transparent !important;
          border: none !important;
          background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
          background-clip: text !important;
          -webkit-background-clip: text !important;
          color: transparent !important;
        }
      }
    }

    .content-wrapper {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      & > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.left-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;

          .chart-title {
            background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            margin-top: 0.2vw;
            margin-left: 0.2vw;
            font-size: 0.8vw;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
          }

          & > div {
            width: 100%;
            height: 100%;
            flex: 1;
            flex-shrink: 0;
            position: relative;

          }

          ::v-deep {
            .left-wrapper-1 {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-wrap: wrap;
              padding: 10px 10px;


              .flex-item {
                height: 48%;
                width: 33%;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                &:nth-child(-n + 3) {
                  border-bottom: 2px solid #144A7B;
                }

                &:nth-child(-n + 2):nth-child(+n + 1) {
                  border-right: 2px solid #144A7B;
                }

                &:nth-child(+n + 4):nth-child(-n + 5) {
                  border-right: 2px solid #144A7B;
                }


                .flex-title {
                  font-size: 0.8vw;
                }

                .flex-count {
                  font-size: 1.5vw;
                }
              }
            }

            .left-wrapper-2 {
              width: 100%;
              flex-direction: column;

              * {
                color: white;
              }

              .ant-table-wrapper {
                width: 100%;

                .ant-spin-nested-loading {
                  width: 100%;

                  th, td {
                    border-bottom: none;
                  }

                  .ant-table-thead {
                    background-color: #083A66;
                    height: 30px;
                    line-height: 0.3;

                    * {
                      background: transparent;
                    }
                  }
                }
              }
            }

            .left-wrapper-3 {
              display: flex;
              align-items: center;
              justify-content: center;

              .left {
                height: 100%;
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;

                .flex-item {
                  height: 33%;
                  width: 100%;
                  color: white;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;

                  &:nth-child(-n + 2) {
                    border-bottom: 2px solid #144A7B;
                  }


                }
              }

              .right {
                height: 100%;
                flex: 1;
              }
            }


          }
        }

        &.middle-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;

          ::v-deep {
            .middle-wrapper-3 {
              display: flex;
              align-items: flex-start;
              justify-content: center;
              padding: 10px 16px;
              flex-direction: column;

              & > .progress-item {
                width: 100%;
              }

              * {
                color: white;
                font-size: 14px;
              }
            }
          }
        }


        &.right-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;
          overflow: hidden;

          ::v-deep {
            .right-wrapper-1 {
              display: flex;
              align-items: center;
              justify-content: center;

              .left {
                height: 100%;
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;

                .flex-item {
                  height: 48%;
                  width: 48%;
                  color: white;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;

                  &:nth-child(-n + 2) {
                    border-bottom: 2px solid #144A7B;
                  }

                  &:nth-child(odd) {
                    border-right: 2px solid #144A7B;
                  }


                  .flex-title {
                    font-size: 0.8vw;
                  }

                  .flex-count {
                    font-size: 1.5vw;
                  }
                }
              }

              .right {
                height: 100%;
                flex: 1;
              }
            }
          }
        }


      }
    }
  }
</style>